<template lang='pug'>
  section
    van-cell(
      icon="location" 
      :title="`收货人：${currentAddress.name || '未选择收货地址'}`" 
      :value="currentAddress.tel" 
      :label="currentAddress.address" 
      is-link 
      @click="listShow = true"
      )
    van-popup(v-model="listShow" position="bottom")
      .noaddress(v-show="!list || !list.length") 暂无收货地址可选
      van-address-list(
        v-model="chosenAddressId"
        :list="list"
        :disabled-list="disabledList"
        add-button-text="新增收货地址"
        @add="onAdd"
        @edit="onEdit"
        @select="select"
        )
    van-popup(v-model="editShow" position="bottom")
      van-address-edit(
        :address-info="addressInfo",
        :area-list="area"
        show-postal
        :show-delete="isChange"
        show-set-default
        show-search-result
        :is-saving="isLoading"
        :search-result="searchResult"
        @save="onSave"
        @delete="onDelete"
        @change-detail="onChangeDetail"
        @change-area="changeArea"
        )
</template>

<script type='text/ecmascript-6'>
  import area from '~/assets/js/area'

  export default {
    props: {
      list: Array,
      value: Number,
      isLoading: Boolean,
      addressInfo: {
        type: Object,
        default: {}
      }
    },
    data() {
      return {
        listShow: false,
        editShow: false,
        chosenAddressId: null,
        // list: [
        //   {
        //     id: '1',
        //     name: '张三',
        //     tel: '13000000000',
        //     address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室'
        //   },
        //   {
        //     id: '2',
        //     name: '李四',
        //     tel: '1310000000',
        //     address: '浙江省杭州市拱墅区莫干山路 50 号'
        //   }
        // ],
        disabledList: [
          // {
          //   id: '3',
          //   name: '王五',
          //   tel: '1320000000',
          //   address: '浙江省杭州市滨江区江南大道 15 号'
          // }
        ],
        area,
        searchResult: [],
        isChange: false,
      }
    },
    watch: {
      value: {
        handler(idx) {
          const list = this.list || []
          this.chosenAddressId = (list[idx] || {}).id || null
        },
        immediate: true
      },
      isLoading(bol) {
        if (!bol) this.editShow = false
      },
      isChange(bol) {
        if (!bol) this.$emit('edit', -1)
      }
    },
    computed: {
      currentAddress() {
        const id = this.chosenAddressId
        return id !== null ? this.list.find(item => item.id === id) : {}
      }
    },
    methods: {
      choose() {},
      onAdd() {
        this.isChange = false
        this.editShow = true
      },

      onEdit(item, index) {
        this.isChange = true
        this.$emit('edit', index)
        this.editShow = true
      },
      onSave(content) {
        this.$emit('add', content)
      },
      onDelete(content) {
        this.$emit('delete', content.id)
      },
      onChangeDetail(val) {
        if (val) {
          this.searchResult = [{
            name: '黄龙万科中心',
            address: '杭州市西湖区'
          }];
        } else {
          this.searchResult = [];
        }
      },
      select(item, index) {
        this.$emit('input', index)
        this.listShow = false
      },
      changeArea(area) {
        console.log('area', area)
      },
    }
  }
</script>

<style lang='stylus' rel='stylesheet/stylus' scoped>

@import '~assets/stylus/variable.styl'
 
.noaddress
  text-align center
  line-height 3
</style>
